<div id="module">

    <div class="hp-form-text">
        <div class="label">Best prices</div>
        <div class="sublabel">in 60 seconds</div>
        <ul class="clean-list">
            <li class="first">Basic information</li>
            <li><a href="<?=$url?>browse_fleet">Select your vehicle</a></li>  
        </ul>
    </div>

    <form id="formReservationBasicData" method="post" action="<?=$url?>step_2">

        <div id="formReservationBasicDatah1" class="fieldset formReservationBasicDatah1">
            <fieldset>
                <div class="fieldset-box">

                    <dl class="formitem-fromBranch formitem">
                        <dt><label class="element" for="fromBranch">Pick up</label> </dt>
                        <dd>                            

                            <select name="pickup_loc_id" id="pickup_loc_id">
                                <optgroup label="Budva">
                                    <option value="1" selected="selected">Globtour Office</option>
                                    <option value="2">Hotel Avala</option>
                                    <option value="3">Hotel Slovenska Plaza</option>
                                    <option value="4">Hotel Mediteran</option>
                                    <option value="5">Hotel Iberostar</option>
                                </optgroup>
                                <optgroup label="Tivat">
                                    <option value="6">Airport +15&euro;</option>
                                    <option value="7">Hotel Palma +15&euro;</option>
                                </optgroup>
                                <optgroup label="Bar">
                                    <option value="8">Hotel Princess +15&euro;</option>
                                </optgroup>
                                <optgroup label="Ulcinj">
                                    <option value="9">Hotel Otrant +15&euro;</option>
                                    <option value="10">Hotel Ada Bojana +15&euro;</option>
                                </optgroup>
                                <optgroup label="Podgorica">
                                    <option value="11">Airport +15&euro;</option>
                                    <option value="12">Hotel Crna Gora +15&euro;</option>
                                    <option value="13">Hotel Podgorica +15&euro;</option>
                                </optgroup>
                            </select>
                            
                        </dd>
                    </dl>

                    <dl class="formitem-fromDateGrp formitem">
                        <dt><label class="element">From</label> </dt>
                        <dd>
                            <input type="text" class="text" name="datefrom" id="datefrom" size="29" disabled="disabled"/>
                        </dd>
                    </dl>

                    <dl class="formitem-fromTimeGrp formitem">
                    <dt><label class="element">Time</label> </dt>
                    <dd>
                        <? echo makefull('fullfrom',15,'id="fullfrom" class="dd"'); ?>
                    </dd>

                </div>
            </fieldset>
        </div> 

        <div id="formReservationBasicDatah2" class="fieldset formReservationBasicDatah2">
            <fieldset>
                <div class="fieldset-box">

                    <dl class="formitem-fromBranch formitem">
                        <dt><label class="element" for="fromBranch">Return</label> </dt>
                        <dd>
                            <select name="return_loc_id" id="return_loc_id">
                                <optgroup label="Budva">
                                    <option value="1" selected="selected">Globtour Office</option>
                                    <option value="2">Hotel Avala</option>
                                    <option value="3">Hotel Slovenska Plaza</option>
                                    <option value="4">Hotel Mediteran</option>
                                    <option value="5">Hotel Iberostar</option>
                                </optgroup>
                                <optgroup label="Tivat">
                                    <option value="6">Airport +15&euro;</option>
                                    <option value="7">Hotel Palma +15&euro;</option>
                                </optgroup>
                                <optgroup label="Bar">
                                    <option value="8">Hotel Princess +15&euro;</option>
                                </optgroup>
                                <optgroup label="Ulcinj">
                                    <option value="9">Hotel Otrant +15&euro;</option>
                                    <option value="10">Hotel Ada Bojana +15&euro;</option>
                                </optgroup>
                                <optgroup label="Podgorica">
                                    <option value="11">Airport +15&euro;</option>
                                    <option value="12">Hotel Crna Gora +15&euro;</option>
                                    <option value="13">Hotel Podgorica +15&euro;</option>
                                </optgroup>
                            </select>

                        </dd>
                    </dl>

                    <dl class="formitem-fromDateGrp formitem">
                        <dt><label class="element">To</label> </dt>
                        <dd>
                            <input type="text" class="text" name="dateto" id="dateto" size="29" disabled="disabled"/>
                        </dd>
                    </dl>

                    <dl class="formitem-fromTimeGrp formitem">
                    <dt><label class="element">Time</label> </dt>
                    <dd>
                        <? echo makefull('fullto',15,'id="fullto" class="dd"'); ?>
                    </dd>
                    
                    </dl>

                </div>
            </fieldset>

        </div>  

        <div id="formReservationBasicDatah3" class="fieldset formReservationBasicDatah3">
            <fieldset>
                <div class="fieldset-box">

                    <dl class="formitem-formReservationStep1Submit formitem">
                        <dt style="<?if(isset($flag)) echo 'display: block; float:left; width:200px';?>"><label class="element" for="formReservationStep1Submit">

                                <?if(isset($flag)){?>
                                    <span class="error" style="border:0 !important"><?=$flag.' '.$msg?></span>
                                    <?}else echo '&nbsp;';?>                        

                        </label> </dt>
                        <dd>
                            <input type="hidden" name="pickup_date" id="pickup_date">
                            <input type="hidden" name="return_date" id="return_date">
                            <input type="submit" value="Get a quote" name="formReservationStep1Submit" id="formReservationStep1Submit" class="submit">
                        </dd>
                    </dl>

                </div>
            </fieldset>
        </div>

    </form>

</div>

<script type="text/javascript">
    $(function(){
        function init_app(){
            /***********************************************************
            * JQUERY UI Calendar with event
            ***********************************************************/

            var date = new Date();    

            //  limiter 1 WEBSITE PICUP DATE - today is not available
            //  limiter 0 SYSTEM PICUP DATE - today is available
            var limiter = 1;

            if(typeof(user_name) != "undefined"){
                limiter = 0;   
            }

            var m = date.getMonth(),
            d = date.getDate() + limiter,
            y = date.getFullYear();

            img_url = base_url+'assets/img/backgnds/calendar.png';
            // Disable all dates till today
            $('#datefrom').datepicker({
                minDate: new Date(y, m, d),
                dateFormat: 'dd.mm.yy',
                showOn: 'button',
                buttonImage: img_url,
                buttonImageOnly: true,
                onSelect: function(dateStr) {

                    var depart = $.datepicker.parseDate('dd.mm.yy', dateStr);
                    depart.setDate(depart.getDate() + limiter);
                    $('#dateto').datepicker("setDate", depart);
                    $('#dateto').datepicker("option", "minDate", depart);

                    $('#pickup_date').val($.datepicker.formatDate('dd.mm.yy', $('#datefrom').datepicker('getDate')));
                    $('#return_date').val($.datepicker.formatDate('dd.mm.yy', $('#dateto').datepicker('getDate')));

                }
            });

            $('#dateto').datepicker({
                minDate: new Date(y, m, d),
                dateFormat: 'dd.mm.yy',
                showOn: 'button',
                buttonImage: img_url,
                buttonImageOnly: true,
                onSelect: function(dateStr) {
                    $('#return_date').val($.datepicker.formatDate('dd.mm.yy', $('#dateto').datepicker('getDate')));
                }
            })

            // SET TIME & DATE
            $('#fullfrom').val('08:00');
            $('#fullto').val('08:00');

            $('#datefrom').datepicker('setDate', new Date(y, m, d));
            $('#dateto').datepicker('setDate', new Date(y, m, d+1));

            $('#pickup_date').val($.datepicker.formatDate('dd.mm.yy', $('#datefrom').datepicker('getDate')));
            $('#return_date').val($.datepicker.formatDate('dd.mm.yy', $('#dateto').datepicker('getDate')));


        }
        init_app();    
    })
</script>
<script language="javascript">
    $(document).ready(function(e) {
        try {
            $("body select.dd").msDropDown();
        } catch(e) {
            alert(e.message);
        }

        $('#pickup_loc_id').live('change', function(){

            var sID = $('#pickup_loc_id option:selected').val(); 
            var $dd = $('#return_loc_id');
            if ($dd.length > 0) { // make sure we found the select we were looking for

                // save the selected value
                var selectedVal = $dd.val();

                // get the options and loop through them
                var $options = $('option', $dd);
                var arrVals = [];
                $options.each(function(){

                    if($(this).val()==sID||$(this).val()==1||$(this).val()==6||$(this).val()==11){
                        
                        $(this).removeAttr('disabled');
                    
                    }else{
                        $(this).attr('disabled','disabled');
                        //console.log($(this).text())
                        //console.log($(this).val())
                    }
                });
            }
            $('#return_loc_id').val(sID).trigger('change');


        })

        $('#pickup_loc_id').val(1).trigger('change');

    });
</script>
<style>
    #pickup_loc_id, #return_loc_id{
        width: 181px;
    }
</style>
